<template>
    <div>
        <div class="szbox" @click="show = true">
            <input type="text" placeholder="请选择问题分类" v-model="fieldValue" readonly/>
            <van-icon name="arrow" />
        </div>
        <van-popup v-model:show="show" round position="bottom">
            <van-cascader
                v-model="cascaderValue"
                title="分类"
                :field-names="fieldNames"
                :options="options"
                @close="show = false"
                @finish="onFinish"
            />
            </van-popup>
    </div>
</template>

<script>
import {mapGetters} from "vuex"
import { Popup as vanPopup,Cascader as vanCascader,Icon as vanIcon,Toast} from 'vant';
import Mixin from "@/components/mixin";
import {getClassifyList} from '@/api/index.js'

export default {
    mixins:[Mixin],
    props:{
        modelValue:String,
    },
    components:{
        vanPopup,
        vanCascader,
        vanIcon
    },
    computed:{
        ...mapGetters({
           // userInfo:'user/userInfo'
        })
    },
    watch: {
        modelValue(newValue, oldValue) {
            
            this.setDefault(newValue)
        },
    },
    data(){
        return {
            show: false,
            fieldValue: '',
            cascaderValue: '',
            // 选项列表，children 代表子选项，支持多级嵌套
            fieldNames:{
                text: 'name',
                value: '_id',
                children: 'children',
            },
            options: [
                // {
                //     text: '浙江省',
                //     value: '330000',
                //     children: [{ text: '杭州市', value: '330100' }],
                // },
                // {
                //     text: '江苏省',
                //     value: '320000',
                //     children: [{ text: '南京市', value: '320100' }],
                // },
                // {
                //     text: '广西省',
                //     value: '310000'
                // },
            ],
        }
    },
    async created(){
        const querys = this.$route.query
        let params = {from:'EJConsult'}
        if(querys.appUserType==1){ // 普通游客
            params.companyId = '65b0cda56eb6493b2c0ae1b1'  // 信用中和公司id
        }else if(querys.appUserType==2 || querys.appUserType==4){// 公司成员、专属游客
            params.companyId = querys.curServiceId
        }else if(querys.appUserType==3){// 专家
            params.companyId = querys.curCompanyId
        }
        const res = await getClassifyList(params)
        if(res.code == 200){
            this.options = res.data.data || []   
        }
        this.modelValue && this.setDefault(this.modelValue)
    },
    async mounted(){
    
    },
    methods:{
        // 全部选项选择完毕后，会触发 finish 事件
        onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.name).join('/');
             console.log("selectedOptions:",selectedOptions)
            // console.log("fieldValue:",this.fieldValue)
            // console.log("cascaderValue:",this.cascaderValue)
            this.$emit('update:modelValue',this.cascaderValue)
        }, 
        setDefault(value){
            this.cascaderValue = value 
            if(this.options){
                this.fieldValue = this.options.find(item =>item._id == value).name; 
            }
        } 
    }
}
</script>

<style lang="scss" scoped>
  .szbox{
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    line-height: 80px;
    padding: 20px;
    border: 0;
    background: #fff;
    border-radius: 10px;
    input{
        flex: 1;
        border: 0;
        width: 100%;
        height: 100%;
    }
  }
</style>
